<template>
  <div id="app">
 <!-- 头部 -->
 <div class="big">


        <div class="heade">
            <div class="nav">
                <div class="nav1"></div>
                <h3>我的课程</h3>
            </div>
        </div>
        <!-- 身体 -->
        <div class="st2">
            <div class="login" v-if="!this.$store.state.user">
                <div><img src="../assets/img/教育APP切图/未登录/组6@2x.png" alt=""></div>
                <p>您还没有登录，请登录后查看我的课程</p>
                <router-link to="/myLogin"><a><button>登录/注册</button></a></router-link>
            </div>

        </div>
        <div class="box1" v-if="this.$store.state.user">
        <div class="st" >
            <!-- st1 -->
            <ul class="st1">
                <li v-for="r in dataList" :key="r.ID" @click="fn2(r.ID)">
                    <a >
                        <img :src="r.Cpic" alt="">
                    </a>
                    <div class="wz">
                        <h3>{{r.Cname}}</h3>
                        <ul class="jc">
                            <li>基础</li>
                            <li>入门</li>
                        </ul>
                        <p>8天前</p>
                        <p>学习进度33%</p>

                    </div>
                </li>
            </ul>
            <p>没有更多啦~</p>
        </div>
    </div>
    <div class="gd"></div>
    <my-footer></my-footer>
     </div>
  </div>
</template>

<script>
import myFooter from '@/components/myFooter.vue'
import {listData} from '@/api/myCoures'
export default {
  name: 'myCoures',
  data() {
      return {
          dataList:''
      }
  },
  components: {
    myFooter
  },
  methods: {
      fn2(e){
            this.$router.push({
                path:'/couresVideo',
                name:'视频',
                query:{
                    courseId:e
                }
            })
             sessionStorage.setItem('addres','/myCoures')
        }
  },
  mounted() {
      console.log(this.$store.state.user);
      console.log(sessionStorage.getItem('user'));
      listData().then(res=>{
          if (sessionStorage.getItem('user')) {
              if(res.success==='成功'){
                    console.log(res.data);
                    this.dataList=res.data
          }
          }
      }).catch(err=>{
          console.log(err);
      })
  },
}
</script>
<style lang="scss" scoped>
.big{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
.heade {
    width: 100%;
    padding: 2rem;
    background: #5064eb;
}

.nav {
    width: 40rem;
    height: 8.7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 2.8rem;
}

.nav1 {
    width: 3.7rem;
    height: 2.4rem;
}


/* st2*/

.login {
    height: 74rem;
    width: 100%;
    font-size: 2.8rem;
    color: #999;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding-top: 20rem;
    button {
        color: #fff;
        width: 16rem;
        height: 6rem;
        border-radius: 2rem;
        background: #5064eb;
    }
    img {
        width: 34rem;
        height: 38rem;
    }
}

.box {
    position: fixed;
    bottom: 0;
}


/* st */

// .box1 {
//     display: none;
// }
.box1{
    width: 100%;
    .st {
    width: 100%;
    background: #f7f7f7;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.st1 {
    width: 100%;
    background: #fff;
    padding: 2rem;
}

.st>p {
    color: #666;
    font-size: 2.4rem;
}

.st1>li {
    width: 100%;
    height: 25.3rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img {
        width: 32.5rem;
        height: 20.1rem;
        border-radius: 2.5rem;
    }
}

.wz {
    width: 34.5rem;
    height: 20.1rem;
    font-size: 2rem;
    color: #808080;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    >h3 {
        color: #000;
    }
}

.jc {
    li {
        width: 6rem;
        font-size: 1.8rem;
        display: inline-block;
        text-align: center;
        color: #145aee;
        &:first-child {
            background: #5064eb;
            color: #fff;
        }
    }
    width: 13rem;
}

.yz {
    width: 10.3rem;
    height: 10.3rem;
    position: absolute;
    right: 1.2rem;
    bottom: 0.5rem;
    background-image: url(../assets/img/教育APP切图/我的课程/ywc.png);
    background-size: 10.3rem 10.3rem;
    background-repeat: no-repeat;
}
}


.gd {
    height: 25.3rem;
}
}
</style>